<template>
  <div class="cart-swiper">
    <!-- 方好几个写好的件 -->
    <div class="cart-swiper-main" :style="containerStyle">
      <!-- 放一个图片以及上下的结构 -->
      <!-- 开始写的轮播 -->
      <div class="cart-new">
        <!-- 放图片以及上面结构 -->
        <div class="cart-container">
          <h3>
            <em>新品</em>
            <div class="new-price">￥349<i>.90</i></div>
          </h3>
          <img src="../images/9ba203e642489f6e408a9c850656b0f.png" alt="" />
        </div>
        <div class="cart-detail-container">
          <div class="shop-from">VAN PYSEL</div>
          <h3 class="shop-name">女式骑行短袖RCR-Emerald Racer - Burgundy</h3>
          <div class="shop-star">
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-wujiaoxingyiban"></i><span>(1)</span>
          </div>
        </div>
      </div>
      <div class="cart-new">
        <!-- 放图片以及上面结构 -->
        <div class="cart-container">
          <h3>
            <em>新品</em>
            <div class="new-price">￥349<i>.90</i></div>
          </h3>
          <img src="../images/9ba203e642489f6e408a9c850656b0f.png" alt="" />
        </div>
        <div class="cart-detail-container">
          <div class="shop-from">VAN PYSEL</div>
          <h3 class="shop-name">女式骑行短袖RCR-Emerald Racer - Burgundy</h3>
          <div class="shop-star">
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-wujiaoxingyiban"></i><span>(1)</span>
          </div>
        </div>
      </div>
      <div class="cart-new">
        <!-- 放图片以及上面结构 -->
        <div class="cart-container">
          <h3>
            <em>新品</em>
            <div class="new-price">￥349<i>.90</i></div>
          </h3>
          <img src="../images/9ba203e642489f6e408a9c850656b0f.png" alt="" />
        </div>
        <div class="cart-detail-container">
          <div class="shop-from">VAN PYSEL</div>
          <h3 class="shop-name">女式骑行短袖RCR-Emerald Racer - Burgundy</h3>
          <div class="shop-star">
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-wujiaoxingyiban"></i><span>(1)</span>
          </div>
        </div>
      </div>
      <div class="cart-new">
        <!-- 放图片以及上面结构 -->
        <div class="cart-container">
          <h3>
            <em>新品</em>
            <div class="new-price">￥349<i>.90</i></div>
          </h3>
          <img src="../images/9ba203e642489f6e408a9c850656b0f.png" alt="" />
        </div>
        <div class="cart-detail-container">
          <div class="shop-from">VAN PYSEL</div>
          <h3 class="shop-name">女式骑行短袖RCR-Emerald Racer - Burgundy</h3>
          <div class="shop-star">
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-wujiaoxingyiban"></i><span>(1)</span>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-swiper-bottom"></div>
  </div>
</template>

<script>
export default {
  name: "swiper",
  computed: {
    containerStyle() {
      return {
        transform: `translate3d(${this.distance}px, 0, 0)`,
      };
    },
  },
};
</script>

<style lang="less">
.cart-swiper {
  width: 100%;
  min-height: 370px;
  background: #fff;
  padding: 0 15px;
  min-width: 863px;
  height: 310px;
  .cart-swiper-main {
    //   移动的是它
    min-height: 310px;
    min-width: 863px;
    padding-top: 35px;
    // overflow: hidden;

    .cart-new {
      width: 206px;
      height: 300px;
      float: left;
      //   background: green;
      margin-right: 10px;
      .cart-container {
        width: 186px;
        height: 215px;
        // background: hotpink;
        padding: 0 10px;
        h3 {
          height: 30px;
          position: relative;
          //   background: chocolate;
          em {
            display: block;
            background: purple;
            width: 30px;
            color: #fff;
            font-weight: 700;
            text-align: center;
            position: absolute;
            top: 7px;
            left: 7px;
            transform: rotate(-10deg);
            // routed
          }
          .new-price {
            width: 68px;
            height: 23px;
            background-color: #ffea28;
            font-size: 16px;
            font-weight: 700;
            float: left;
            position: absolute;
            top: 17px;
            right: 15px;
            i {
              font-size: 12px;
            }
          }
        }
        img {
          width: 180px;
          height: 180px;
        }
      }
      .cart-detail-container {
        .shop-from,
        .shop-name,
        .shop-star {
          width: 100%;
          height: 17px;
          //   background: hotpink;
          float: left;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          i {
            color: #ffb339;
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
          }
          span {
            font-size: 12px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .shop-from {
          //   padding: 0 10px;
          font-weight: 700;
        }
        .shop-name {
          height: 32px;
        }
      }
    }
  }
}
</style>
